<template>
  <div class="login-page">
    <!-- 超动感背景层 -->
    <div class="cosmic-background">
      <!-- 星空背景 -->
      <div class="stars">
        <div class="star" v-for="n in 100" :key="'star-' + n"></div>
      </div>
      
      <!-- 动态波浪 -->
      <div class="wave-container">
        <svg class="wave" viewBox="0 0 1200 120" preserveAspectRatio="none">
          <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="wave-1"></path>
        </svg>
        <svg class="wave" viewBox="0 0 1200 120" preserveAspectRatio="none">
          <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" class="wave-2"></path>
        </svg>
      </div>
      
      <!-- 漂浮几何体 -->
      <div class="floating-objects">
        <div class="floating-object obj-1">
          <div class="geometry cube"></div>
        </div>
        <div class="floating-object obj-2">
          <div class="geometry sphere"></div>
        </div>
        <div class="floating-object obj-3">
          <div class="geometry pyramid"></div>
        </div>
        <div class="floating-object obj-4">
          <div class="geometry torus"></div>
        </div>
        <div class="floating-object obj-5">
          <div class="geometry hexagon"></div>
        </div>
      </div>
      
      <!-- 光线效果 -->
      <div class="light-rays">
        <div class="ray ray-1"></div>
        <div class="ray ray-2"></div>
        <div class="ray ray-3"></div>
      </div>
      
      <!-- 渐变覆盖层 -->
      <div class="cosmic-overlay"></div>
    </div>

    <!-- 高级粒子系统 -->
    <canvas ref="particleCanvas" class="particle-canvas"></canvas>
 
    <div class="login-container">
      <!-- 全新登录卡片 -->
      <div class="login-card">
        <!-- 卡片装饰 -->
        <div class="card-decoration">
          <div class="decoration-circle circle-1"></div>
          <div class="decoration-circle circle-2"></div>
          <div class="decoration-line line-1"></div>
          <div class="decoration-line line-2"></div>
        </div>
        
        <div class="login-header">
          <div class="logo-section">
            <div class="logo-container">
              <div class="logo-bg"></div>
              <div class="logo-icon">🎨</div>
            </div>
            <h2>登录游戏</h2>
          </div>
          <p>欢迎回到涂色抢地盘世界</p>
        </div>

        <form @submit.prevent="handleLogin" class="login-form">
          <!-- 用户名输入 -->
          <div class="form-group">
            <div class="input-wrapper">
              <svg class="input-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12ZM12 14C9.33 14 4 15.34 4 18V20H20V18C20 15.34 14.67 14 12 14Z" fill="currentColor"/>
              </svg>
              <input
                id="username"
                v-model="loginForm.username"
                type="text"
                placeholder="用户名"
                class="styled-input"
                required
                autocomplete="username"
              />
              <div class="input-underline"></div>
            </div>
          </div>

          <!-- 密码输入 -->
          <div class="form-group">
            <div class="input-wrapper">
              <svg class="input-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6 10V8C6 5.79 7.79 4 10 4H14C16.21 4 18 5.79 18 8V10H19C20.1 10 21 10.9 21 12V20C21 21.1 20.1 22 19 22H5C3.9 22 3 21.1 3 20V12C3 10.9 3.9 10 5 10H6ZM8 8V10H16V8C16 6.9 15.1 6 14 6H10C8.9 6 8 6.9 8 8Z" fill="currentColor"/>
              </svg>
              <input
                id="password"
                v-model="loginForm.password"
                :type="showPassword ? 'text' : 'password'"
                placeholder="密码"
                class="styled-input"
                required
                autocomplete="current-password"
              />
              <button
                type="button"
                class="password-visibility-btn"
                @click="togglePasswordVisibility"
                :aria-label="showPassword ? '隐藏密码' : '显示密码'"
              >
                <svg v-if="!showPassword" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
                </svg>
                <svg v-else viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="m1 1 22 22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M6.71 6.71C4.45 8.27 2.5 10.5 1 12c1.5 1.5 3.45 3.73 5.71 5.29" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M17.29 17.29C19.55 15.73 21.5 13.5 23 12c-1.5-1.5-3.45-3.73-5.71-5.29" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M8.93 8.93A3 3 0 1 1 15.07 15.07" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </button>
              <div class="input-underline"></div>
            </div>
          </div>          <!-- 选项区域 -->
          <div class="form-options">
            <label class="modern-checkbox">
              <input
                v-model="loginForm.rememberMe"
                type="checkbox"
                class="checkbox-input"
              />
              <span class="checkbox-design">
                <svg class="checkbox-check" viewBox="0 0 24 24">
                  <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
                </svg>
              </span>
              <span class="checkbox-text">记住我</span>
            </label>
            <router-link to="/auth/forgot" class="forgot-link">
              忘记密码？
            </router-link>
          </div>

          <!-- 登录按钮 -->
          <button
            type="submit"
            class="magic-btn"
            :disabled="isLoading"
            @click="handleButtonClick"
          >
            <span class="btn-bg"></span>
            <span class="btn-content">
              <span v-if="isLoading" class="loading-animation">
                <div class="spinner"></div>
                <span>登录中...</span>
              </span>
              <span v-else class="login-text">
                <span class="btn-icon">🚀</span>
                <span>登录</span>
              </span>
            </span>
            <div class="btn-particles">
              <span v-for="n in 12" :key="n" class="particle"></span>
            </div>
          </button>
        </form>

        <!-- 底部链接 -->
        <div class="footer-links">
          <div class="register-section">
            <span class="register-text">还没有账号？</span>
            <router-link to="/auth/register" class="register-link">立即注册</router-link>
          </div>
          
          <div class="divider">
            <div class="divider-line"></div>
            <span class="divider-text">或者</span>
            <div class="divider-line"></div>
          </div>
          
          <router-link to="/" class="home-btn">
            <span class="home-icon">🏠</span>
            <span>返回首页</span>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { authAPI } from '@/api/auth'
import { useUserStore } from '@/stores/user.js'

const router = useRouter()
const userStore = useUserStore()

// 表单数据
const loginForm = ref({
  username: localStorage.getItem('remember_username') || '',
  password: localStorage.getItem('remember_password') || '',
  rememberMe: !!localStorage.getItem('remember_username')
})

// 状态管理
const isLoading = ref(false)
const showPassword = ref(false)

// 切换密码显示
const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value
}

// 高级粒子系统
const particleCanvas = ref(null)
let animationId = null
const particles = []
const connections = []

// 初始化增强粒子系统
const initAdvancedParticles = () => {
  if (!particleCanvas.value) return
  
  const canvas = particleCanvas.value
  const ctx = canvas.getContext('2d')
  
  // 设置画布尺寸
  const resizeCanvas = () => {
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
  }
  
  resizeCanvas()
  window.addEventListener('resize', resizeCanvas)
  
  // 创建更多粒子
  for (let i = 0; i < 120; i++) {
    const hue = Math.random() * 60 + 200 // 200-260 蓝紫色范围
    particles.push({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      vx: (Math.random() - 0.5) * 1,
      vy: (Math.random() - 0.5) * 1,
      size: Math.random() * 3 + 1,
      opacity: Math.random() * 0.8 + 0.2,
      color: `hsl(${hue}, 70%, 60%)`,
      pulse: Math.random() * Math.PI * 2,
      energy: Math.random() * 100
    })
  }
  
  // 动画循环
  const animate = () => {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'
    ctx.fillRect(0, 0, canvas.width, canvas.height)
    
    particles.forEach((particle, i) => {
      // 更新位置
      particle.x += particle.vx
      particle.y += particle.vy
      particle.pulse += 0.02
      
      // 边界检测和反弹
      if (particle.x < 0 || particle.x > canvas.width) {
        particle.vx *= -0.8
        particle.x = Math.max(0, Math.min(canvas.width, particle.x))
      }
      if (particle.y < 0 || particle.y > canvas.height) {
        particle.vy *= -0.8
        particle.y = Math.max(0, Math.min(canvas.height, particle.y))
      }
      
      // 脉冲效果
      const pulseSize = particle.size + Math.sin(particle.pulse) * 0.5
      
      // 绘制粒子光晕
      const gradient = ctx.createRadialGradient(
        particle.x, particle.y, 0,
        particle.x, particle.y, pulseSize * 3
      )
      gradient.addColorStop(0, particle.color.replace('60%', '80%'))
      gradient.addColorStop(1, 'transparent')
      
      ctx.beginPath()
      ctx.fillStyle = gradient
      ctx.arc(particle.x, particle.y, pulseSize * 3, 0, Math.PI * 2)
      ctx.fill()
      
      // 绘制核心粒子
      ctx.beginPath()
      ctx.arc(particle.x, particle.y, pulseSize, 0, Math.PI * 2)
      ctx.fillStyle = particle.color
      ctx.shadowBlur = 10
      ctx.shadowColor = particle.color
      ctx.fill()
      ctx.shadowBlur = 0
    })
    
    // 绘制动态连线
    particles.forEach((particle, i) => {
      particles.slice(i + 1).forEach(otherParticle => {
        const dx = particle.x - otherParticle.x
        const dy = particle.y - otherParticle.y
        const distance = Math.sqrt(dx * dx + dy * dy)
        
        if (distance < 150) {
          const opacity = (1 - distance / 150) * 0.3
          const gradient = ctx.createLinearGradient(
            particle.x, particle.y,
            otherParticle.x, otherParticle.y
          )
          
          // 创建半透明的连接线颜色
          const color1 = particle.color.replace('60%', `${opacity * 100}%`)
          const color2 = otherParticle.color.replace('60%', `${opacity * 100}%`)
          
          gradient.addColorStop(0, color1)
          gradient.addColorStop(1, color2)
          
          ctx.beginPath()
          ctx.moveTo(particle.x, particle.y)
          ctx.lineTo(otherParticle.x, otherParticle.y)
          ctx.strokeStyle = gradient
          ctx.lineWidth = opacity * 2
          ctx.stroke()
        }
      })
    })
    
    animationId = requestAnimationFrame(animate)
  }
  
  animate()
}

// 按钮特效
const handleButtonClick = (event) => {
  const button = event.currentTarget
  
  // 创建点击波纹
  const rect = button.getBoundingClientRect()
  const x = event.clientX - rect.left
  const y = event.clientY - rect.top
  
  // 触发粒子爆炸效果
  const particles = button.querySelectorAll('.particle')
  particles.forEach((particle, i) => {
    particle.style.setProperty('--delay', `${i * 0.1}s`)
    particle.style.animation = 'none'
    setTimeout(() => {
      particle.style.animation = 'particleExplode 0.8s ease-out forwards'
    }, 10)
  })
  
  // 重置动画
  setTimeout(() => {
    particles.forEach(particle => {
      particle.style.animation = ''
    })
  }, 800)
}

// 登录处理
const handleLogin = async () => {
  isLoading.value = true
  try {
    const res = await authAPI.login({
      username: loginForm.value.username,
      password: loginForm.value.password,
      rememberMe: loginForm.value.rememberMe
    })
    if (res.code === 1000) {
      userStore.setToken(res.data.token, loginForm.value.rememberMe)
      userStore.setUserInfo(res.data.user)
      // 记住用户名和密码
      if (loginForm.value.rememberMe) {
        localStorage.setItem('remember_username', loginForm.value.username)
        localStorage.setItem('remember_password', loginForm.value.password)
      } else {
        localStorage.removeItem('remember_username')
        localStorage.removeItem('remember_password')
      }
      router.push('/')
    } else {
      window.alert(res.message || '登录失败')
    }
  } catch (error) {
    if (error.response && error.response.data && error.response.data.message) {
      window.alert(error.response.data.message)
    } else {
      window.alert('网络错误或服务器异常')
    }
  } finally {
    isLoading.value = false
  }
}

onMounted(() => {
  initAdvancedParticles()
  
  // 随机设置星星位置和动画
  const stars = document.querySelectorAll('.star')
  stars.forEach((star, i) => {
    // 随机位置
    const top = Math.random() * 100
    const left = Math.random() * 100
    star.style.top = `${top}%`
    star.style.left = `${left}%`
    
    // 随机动画参数
    star.style.setProperty('--delay', `${Math.random() * 5}s`)
    star.style.setProperty('--duration', `${Math.random() * 3 + 2}s`)
  })
})

onUnmounted(() => {
  if (animationId) {
    cancelAnimationFrame(animationId)
  }
})
</script>

<style scoped>
/* 全局样式 */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* 宇宙级背景系统 */
.cosmic-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
  background: radial-gradient(ellipse at center, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
}

/* 星空效果 */
.stars {
  position: absolute;
  width: 100%;
  height: 100%;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  opacity: 0;
  animation: twinkle var(--duration, 3s) infinite var(--delay, 0s);
}

.star:nth-child(1) { top: 10%; left: 15%; }
.star:nth-child(2) { top: 20%; left: 80%; }
.star:nth-child(3) { top: 5%; left: 45%; }
.star:nth-child(4) { top: 15%; left: 70%; }
.star:nth-child(5) { top: 30%; left: 25%; }
.star:nth-child(6) { top: 40%; left: 90%; }
.star:nth-child(7) { top: 50%; left: 10%; }
.star:nth-child(8) { top: 60%; left: 60%; }
.star:nth-child(9) { top: 70%; left: 35%; }
.star:nth-child(10) { top: 80%; left: 75%; }
.star:nth-child(11) { top: 85%; left: 20%; }
.star:nth-child(12) { top: 90%; left: 55%; }
.star:nth-child(13) { top: 12%; left: 30%; }
.star:nth-child(14) { top: 25%; left: 65%; }
.star:nth-child(15) { top: 35%; left: 40%; }
.star:nth-child(16) { top: 45%; left: 85%; }
.star:nth-child(17) { top: 55%; left: 15%; }
.star:nth-child(18) { top: 65%; left: 50%; }
.star:nth-child(19) { top: 75%; left: 95%; }
.star:nth-child(20) { top: 95%; left: 30%; }

.star:nth-child(2n) {
  width: 1px;
  height: 1px;
}

.star:nth-child(3n) {
  width: 3px;
  height: 3px;
  background: #4facfe;
}

.star:nth-child(4n) {
  background: #f093fb;
}

.star:nth-child(5n) {
  background: #43e97b;
}

@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* 动态波浪 */
.wave-container {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
}

.wave-1 {
  animation: wave1 8s ease-in-out infinite;
  fill: url(#wave1Gradient);
}

.wave-2 {
  animation: wave2 6s ease-in-out infinite reverse;
  fill: url(#wave2Gradient);
}

@keyframes wave1 {
  0%, 100% { transform: translateX(0) scaleY(1); }
  50% { transform: translateX(-25px) scaleY(1.1); }
}

@keyframes wave2 {
  0%, 100% { transform: translateX(0) scaleY(0.8); }
  50% { transform: translateX(25px) scaleY(1.2); }
}

/* 漂浮几何体 */
.floating-objects {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.floating-object {
  position: absolute;
  animation: float 20s infinite ease-in-out;
}

.obj-1 { top: 10%; left: 10%; animation-delay: 0s; }
.obj-2 { top: 20%; right: 15%; animation-delay: -5s; }
.obj-3 { bottom: 30%; left: 20%; animation-delay: -10s; }
.obj-4 { bottom: 20%; right: 25%; animation-delay: -15s; }
.obj-5 { top: 60%; left: 5%; animation-delay: -8s; }

.geometry {
  width: 40px;
  height: 40px;
  opacity: 0.1;
  filter: blur(1px);
}

.cube {
  background: linear-gradient(45deg, #667eea, #764ba2);
  transform: rotate(45deg);
  animation: rotate 10s linear infinite;
}

.sphere {
  background: radial-gradient(circle, #f093fb, #f5576c);
  border-radius: 50%;
  animation: pulse 8s ease-in-out infinite;
}

.pyramid {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 35px solid #4facfe;
  animation: spin 12s linear infinite;
}

.torus {
  border: 8px solid #43e97b;
  border-radius: 50%;
  background: transparent;
  animation: rotate 15s linear infinite reverse;
}

.hexagon {
  width: 30px;
  height: 17px;
  background: #fa709a;
  position: relative;
  animation: rotate 8s linear infinite;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 8.5px solid #fa709a;
}

.hexagon:after {
  top: 100%;
  border-top: 8.5px solid #fa709a;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-20px) rotate(90deg); }
  50% { transform: translateY(-10px) rotate(180deg); }
  75% { transform: translateY(-30px) rotate(270deg); }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

@keyframes spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

/* 光线效果 */
.light-rays {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ray {
  position: absolute;
  width: 2px;
  height: 100vh;
  background: linear-gradient(transparent, rgba(79, 172, 254, 0.3), transparent);
  opacity: 0.6;
  animation: rayMove 12s linear infinite;
}

.ray-1 {
  left: 20%;
  animation-delay: 0s;
}

.ray-2 {
  left: 60%;
  animation-delay: -4s;
}

.ray-3 {
  left: 80%;
  animation-delay: -8s;
}

@keyframes rayMove {
  0% { transform: translateX(-100px) scaleY(0); }
  50% { transform: translateX(0) scaleY(1); }
  100% { transform: translateX(100px) scaleY(0); }
}

/* 宇宙覆盖层 */
.cosmic-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at center,
    rgba(26, 26, 46, 0.3) 0%,
    rgba(22, 33, 62, 0.6) 50%,
    rgba(15, 15, 35, 0.8) 100%
  );
  z-index: -1;
}

/* 高级粒子系统 */
.particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
}

/* 登录容器 */
.login-container {
  width: 100%;
  max-width: 480px;
  z-index: 10;
  position: relative;
}

/* 全新登录卡片 */
.login-card {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  padding: 3.5rem;
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: cardAppear 1s ease-out;
  overflow: hidden;
}

@keyframes cardAppear {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 卡片装饰 */
.card-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.decoration-circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.1;
}

.circle-1 {
  width: 120px;
  height: 120px;
  background: linear-gradient(45deg, #667eea, #764ba2);
  top: -60px;
  right: -60px;
  animation: decorationFloat 8s ease-in-out infinite;
}

.circle-2 {
  width: 80px;
  height: 80px;
  background: linear-gradient(45deg, #f093fb, #f5576c);
  bottom: -40px;
  left: -40px;
  animation: decorationFloat 6s ease-in-out infinite reverse;
}

.decoration-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  opacity: 0.5;
}

.line-1 {
  top: 30%;
  left: 0;
  width: 100%;
  animation: lineSlide 10s linear infinite;
}

.line-2 {
  bottom: 30%;
  left: 0;
  width: 100%;
  animation: lineSlide 12s linear infinite reverse;
}

@keyframes decorationFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(10px, -10px) rotate(180deg); }
}

@keyframes lineSlide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* 登录头部 */
.login-header {
  text-align: center;
  margin-bottom: 3rem;
}

.logo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.5rem;
}

.logo-container {
  position: relative;
  margin-bottom: 1.5rem;
}

.logo-bg {
  position: absolute;
  width: 80px;
  height: 80px;
  background: conic-gradient(from 0deg, #667eea, #764ba2, #f093fb, #f5576c, #667eea);
  border-radius: 50%;
  animation: logoRotate 4s linear infinite;
  filter: blur(8px);
  opacity: 0.7;
}

.logo-icon {
  position: relative;
  z-index: 2;
  font-size: 3.5rem;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  animation: logoFloat 3s ease-in-out infinite;
}

@keyframes logoRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.login-header h2 {
  font-size: 2.5rem;
  margin: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 30%, #f093fb 70%, #f5576c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.login-header p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.1rem;
  margin: 0.8rem 0 0 0;
  font-weight: 400;
}

/* 表单样式 */
.login-form {
  margin-bottom: 2.5rem;
}

.form-group {
  margin-bottom: 2.5rem;
  position: relative;
}

/* 输入框包装器 */
.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  transition: all 0.3s ease;
  padding: 16px;
  backdrop-filter: blur(20px);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  height: 64px; /* 固定高度确保一致性 */
  min-height: 64px; /* 最小高度 */
}

.input-wrapper:focus-within {
  background: rgba(255, 255, 255, 0.08);
  border-color: #667eea;
  transform: translateY(-2px);
  box-shadow: 
    0 20px 60px rgba(102, 126, 234, 0.15),
    0 0 0 1px rgba(102, 126, 234, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.input-icon {
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.6);
  margin-right: 16px;
  transition: all 0.3s ease;
  flex-shrink: 0;
  min-width: 20px; /* 确保图标宽度一致 */
}

.input-wrapper:focus-within .input-icon {
  color: #667eea;
  transform: scale(1.1);
}

.styled-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 1.1rem;
  font-weight: 500;
  color: #ffffff;
  padding: 0;
  transition: all 0.3s ease;
  letter-spacing: 0.3px;
  height: 100%; /* 确保输入框占满容器高度 */
  line-height: 1.4; /* 统一行高 */
}

.styled-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.styled-input:focus::placeholder {
  color: rgba(255, 255, 255, 0.3);
  transform: translateX(5px);
}

.password-visibility-btn {
  margin-left: 12px;
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  flex-shrink: 0;
  min-width: 40px; /* 确保按钮宽度一致 */
  min-height: 40px; /* 确保按钮高度一致 */
}

.password-visibility-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
}

.password-visibility-btn svg {
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
}

.password-visibility-btn:hover svg {
  color: #667eea;
}

.input-underline {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, #667eea, #764ba2, #f093fb, #667eea);
  background-size: 300% 100%;
  animation: shimmer 3s ease-in-out infinite;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 1px;
}

.input-wrapper:focus-within .input-underline {
  width: 100%;
}

@keyframes shimmer {
  0% { background-position: 300% 0; }
  50% { background-position: -100% 0; }
  100% { background-position: 300% 0; }
}

/* 选项区域 */
.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.5rem;
}

.modern-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.checkbox-input {
  opacity: 0;
  position: absolute;
}

.checkbox-design {
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  margin-right: 0.8rem;
  position: relative;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkbox-input:checked + .checkbox-design {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: #667eea;
  transform: scale(1.05);
}

.checkbox-check {
  width: 14px;
  height: 14px;
  fill: white;
  opacity: 0;
  transform: scale(0);
  transition: all 0.2s ease;
}

.checkbox-input:checked + .checkbox-design .checkbox-check {
  opacity: 1;
  transform: scale(1);
}

.checkbox-text {
  font-size: 0.95rem;
}

.forgot-link {
  color: #667eea;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
}

.forgot-link:hover {
  color: #764ba2;
}

.forgot-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  transition: width 0.3s ease;
}

.forgot-link:hover::after {
  width: 100%;
}

/* 魔法登录按钮 */
.magic-btn {
  width: 100%;
  height: 60px;
  border: none;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 600;
  color: white;
  background: transparent;
  transition: all 0.3s ease;
}

.btn-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
  transition: all 0.3s ease;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.magic-btn:hover .btn-bg {
  background-size: 300% 300%;
  animation-duration: 1s;
}

.magic-btn:disabled .btn-bg {
  background: rgba(255, 255, 255, 0.1);
  animation: none;
}

.btn-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.loading-animation {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.login-text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-icon {
  font-size: 1.2rem;
  animation: rocketBounce 2s ease-in-out infinite;
}

@keyframes rocketBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.btn-particles {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: white;
  border-radius: 50%;
  opacity: 0;
}

@keyframes particleExplode {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--x, 0), var(--y, 0)) scale(1);
  }
}

.magic-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
}

.magic-btn:active {
  transform: translateY(0);
}

/* 底部链接 */
.footer-links {
  text-align: center;
}

.register-section {
  margin-bottom: 1.5rem;
}

.register-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  margin-right: 0.5rem;
}

.register-link {
  color: #667eea;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  position: relative;
}

.register-link:hover {
  color: #764ba2;
}

.register-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  transition: width 0.3s ease;
}

.register-link:hover::after {
  width: 100%;
}

.divider {
  display: flex;
  align-items: center;
  margin: 2rem 0;
  gap: 1rem;
}

.divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.divider-text {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
}

.home-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 2rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.home-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  color: white;
}

.home-icon {
  font-size: 1.1rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .login-page {
    padding: 1rem;
  }
  
  .login-card {
    padding: 2.5rem;
    border-radius: 20px;
  }
  
  .logo-icon {
    font-size: 3rem;
    width: 70px;
    height: 70px;
  }
  
  .login-header h2 {
    font-size: 2rem;
  }
  
  .form-group {
    margin-bottom: 2rem;
  }
  
  .input-wrapper {
    border-radius: 16px;
    padding: 14px;
    height: 56px; /* 移动端统一高度 */
    min-height: 56px;
  }
  
  .input-icon {
    width: 18px;
    height: 18px;
    margin-right: 14px;
    min-width: 18px;
  }
  
  .styled-input {
    font-size: 1rem;
    line-height: 1.4;
  }
  
  .password-visibility-btn {
    width: 36px;
    height: 36px;
    margin-left: 10px;
    min-width: 36px;
    min-height: 36px;
  }
  
  .password-visibility-btn svg {
    width: 16px;
    height: 16px;
  }
  
  .magic-btn {
    height: 55px;
  }
  
  .form-options {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
}

@media (max-width: 480px) {
  .login-card {
    padding: 2rem;
  }
  
  .form-group {
    margin-bottom: 1.8rem;
  }
  
  .input-wrapper {
    border-radius: 14px;
    padding: 12px;
    height: 52px; /* 小屏设备统一高度 */
    min-height: 52px;
  }
  
  .input-icon {
    width: 16px;
    height: 16px;
    margin-right: 12px;
    min-width: 16px;
  }
  
  .styled-input {
    font-size: 0.95rem;
    line-height: 1.4;
  }
  
  .password-visibility-btn {
    width: 32px;
    height: 32px;
    margin-left: 8px;
    min-width: 32px;
    min-height: 32px;
  }
  
  .password-visibility-btn svg {
    width: 14px;
    height: 14px;
  }
}

/* 无障碍和动画性能优化 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
</style>
